<template>
  <section class="todoapp">
    <header class="header">
      <h1>vue3-todomvc</h1>
      <input
        class="new-todo"
        placeholder="What do you want to do"
        v-model="todoName"
        @keyup.enter="addTodo"
      >
    </header>

    <section class="main">
      <input id="toggle-all" class="toggle-all" type="checkbox" v-model="checkAll">
      <label for="toggle-all">Mark all as complete</label>
      <ul class="todo-list">
        <li
          v-for="todo in filteredTodos"
          :key="todo.id"
          class="todo"
          :class="{completed: todo.done, editing: todo.id === currentId}"
        >
          <div class="view">
            <input class="toggle" type="checkbox" v-model="todo.done">
            <label @dblclick="showTodo(todo.id, todo.name)">{{ todo.name }}</label>
            <button class="destroy" @click="delTodo(todo.id)"></button>
          </div>
          <input
            class="edit"
            type="text"
            v-model="currentName"
            v-todo-focus="todo.id === currentId"
            @blur="editTodo(todo)"
            @keyup.esc="currentId = ''"
            @keyup.enter="editTodo(todo)"
          >
        </li>
      </ul>
    </section>

    <footer class="footer" v-if="list.length > 0" v-cloak>
      <span class="todo-count">
        <strong>{{ leftCount }}</strong> items  left
      </span>
      <ul class="filters">
        <li>
          <button
            v-for="btn in btns"
            :key="btn.value"
            :class="visibility==btn.value?'selected':''"
            @click="visibility=btn.value"
          >{{ btn.label }}</button>
        </li>
      </ul>
      <button
        v-if="isShow"
        class="clear-completed"
        @click="clearTodo"
      > Clear completed
      </button>
    </footer>

  </section>

</template>

<script>
import { reactive, toRefs, computed, watch } from 'vue'
import { todoFilters } from '../utils'

export default {
  name: 'Todo',
  setup(){
    const state = reactive({
      todoName: '',
      //用户记录需要修改的任务ID
      currentId: '',
      //用户记录需要修改的任务名字
      currentName: '',
      //需要完成的任务列表
      list: JSON.parse(localStorage.getItem('todos')) || [],
      btns: [
        { label: 'All', value: 'all' },
        { label: 'Active', value: 'active' },
        { label: 'Completed', value: 'completed' },
      ],
      visibility: 'all'
    })

    //删除任务
    const delTodo = (id) => {
      state.list = state.list.filter(item => item.id !== id)
    }
    //添加任务
    const addTodo = () => {
      const todo = {
        id: state.list.length + 1,
        name: state.todoName,
        done: false
      }
      state.list.unshift(todo)
      state.todoName = ''
    }
    //双击时 显示任务
    const showTodo = (id, name) => {
      state.currentId = id,
      state.currentName = name
      console.log( id, name )
    }
    //修改任务
    const editTodo = (todo) => {
      todo.name = state.currentName
      state.currentId = ''
    }
    //清空完成的任务
    const clearTodo = () => {
      state.list = state.list.filter(item => !item.done)
    }
    //计算属性
    const computedData = reactive({
      //显示未完成的数量
      leftCount: computed(() => {
        return state.list.filter(item => !item.done).length
      }),
      //有一个任务完成就显示
      isShow: computed(() => {
        return state.list.some(item => !item.done)  //是要有一个任务完成就显示
      }),
      //全选
      checkAll: computed({
        get: () => {
          return state.list.every(item => item.done)
        },
        set: (value) => {
          state.list.forEach(item => item.done = value)
        }
      })
    })
    const filteredTodos = computed(() => {
      console.log(state.visibility)
      return todoFilters[state.visibility](state.list)
    })

    //监听任务列表的变化
    watch(() => state.list, (value) => {
      localStorage.setItem('todos', JSON.stringify(state.list))
    }, {
      //深度监听
      deep: true
    })
    return {
      ...toRefs(state),
      ...toRefs(computedData),
      delTodo,
      addTodo,
      showTodo,
      editTodo,
      clearTodo,
      filteredTodos
    }
  },
  directives: {
    "todo-focus": (el, binding) => {
      if(binding.value){
        el.focus()
      }
    }
  }

}
</script>
